<template>
  <div>
    <!--   default-expand-all 默认开启 -->
    <el-table
        :data="tableData"
        style="width: 100%; margin-bottom: 20px"
        row-key="classId"
        border

        :tree-props="{ children: 'childrenStudent', hasChildren: 'hasChildren' }"
    >
      <el-table-column
          :show-overflow-tooltip="true"
          :prop="item.prop"
          :label="item.label"
          v-for="item in props"
          :key="item.prop"
          align="center"
      >
      </el-table-column>
      <!-- <el-table-column
        :show-overflow-tooltip="true"
        :prop="item.prop"
        :label="item.label"
        v-for="item in propose"
        :key="item.prop"
        align="center"
      >
       
      </el-table-column> -->
    </el-table>
    <div class="pagination">
      <el-pagination
          :currentPage="query1.pageNum"
          :page-sizes="[5, 10, 15]"
          :page-size="query1.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageTotal"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {reactive, ref} from "vue";
import {ElMessage} from "element-plus";
import request from "../../utils/request";
import {useRoute} from "vue-router";

export default {
  name: "ViewClasses",

  setup() {
    const route = useRoute();

    const props = [
      {label: "专业", prop: "majorName"},
      {label: "班级", prop: "className"},
      {label: "人数", prop: "studentNumber"},
      {label: "学生姓名", prop: "studentName"},
      {label: "学号", prop: "studentId"},
      {label: "身份证", prop: "idCardNo"},
      {label: "性别", prop: "gender"},
    ];
    // const propose = [
    //   { label: "学生姓名", prop: "studentName" },
    //   { label: "学号", prop: "studentId" },
    //   { label: "身份证", prop: "idCardNo" },
    //   { label: "性别", prop: "gender" },
    // ];
    const query1 = reactive({
      majorName: "",
      pageNum: 1,
      pageSize: 5,
    });

    const tableData = ref([]);
    const childrenStudent = ref([]);
    const pageTotal = ref(0);

    // if (route.query.majorName) {
    //   query1.majorName = route.query.majorName;
    //   request
    //     .get("/major/queryMajorName", {
    //       params: query1,
    //     })
    //     .then((res) => {
    //       if (res.code == 18) {
    //         ElMessage.warning(res.msg);
    //         tableData.value = [];
    //       } else {
    //         tableData.value = res.data;
    //         childrenStudent.value = res.data.childrenStudent;
    //         console.log(res.data);
    //       }
    //     });
    // }

    if (route.query.majorName) {
      query1.majorName = route.query.majorName;
      request
          .get("/major/queryPageMajorName", {
            params: query1,
          })
          .then((res) => {
            if (res.code === 18) {
              ElMessage.warning(res.msg);
              tableData.value = [];
            } else {
              tableData.value = res.data.records;
              childrenStudent.value = res.data.records.childrenStudent;
              pageTotal.value = res.data.total;
            }
          });
    } else {
      ElMessage.warning("无数据");
    }
    // 分页大小
    const handleSizeChange = (val) => {
      query1.pageSize = val;
      if (route.query.majorName) {
        query1.majorName = route.query.majorName;
        request
            .get("/major/queryMajorName", {
              params: query1,
            })
            .then((res) => {
              if (res.code === 18) {
                ElMessage.warning(res.msg);
                tableData.value = [];
              } else {
                tableData.value = res.data.records;
                childrenStudent.value = res.data.records.childrenStudent;
                pageTotal.value = res.data.total;
              }
            });
      } else {
        ElMessage.warning("无数据");
      }
    };
    // 分页导航
    const handlePageChange = (val) => {
      query1.pageNum = val;
      if (route.query.majorName) {
        query1.majorName = route.query.majorName;
        request
            .get("/major/queryMajorName", {
              params: query1,
            })
            .then((res) => {
              if (res.code === 18) {
                ElMessage.warning(res.msg);
                tableData.value = [];
              } else {
                tableData.value = res.data.records;
                childrenStudent.value = res.data.records.childrenStudent;
                pageTotal.value = res.data.total;
              }
            });
      } else {
        ElMessage.warning("无数据");
      }
    };

    // 查询操作

    return {
      props,
      //  propose,
      query1,
      tableData,
      pageTotal,
      handleSizeChange,
      handlePageChange,
    };
  },
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: row;
}

.container-left {
  width: 20%;
  padding-right: 20px;
}

.container-right {
  width: 80%;
  display: flex;
  flex-direction: column;
}

.handle-box {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}

.table {
  width: 100%;
  font-size: 14px;
}

.red {
  color: #ff0000;
}

.mr10 {
  margin-right: 10px;
}

.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>
